<template>
  <el-row align="middle">
    <el-col :span="12">
      <div>
        <span class="mediatitle" style="margin-bottom:0">
          付费套餐列表
          <span v-if="tableData.length > 0">({{tableData.length}})</span>
        </span>
      </div>
    </el-col>
    <el-col :span="12">
      <div align="right" v-if="currentCorpid == dataInfo.corpid && isedit">
        <el-button type="primary" size="mini" @click="handleCreatePaidPackage">
          <el-icon>
            <plus />
          </el-icon>
          添加付费套餐
        </el-button>
      </div>
    </el-col>
  </el-row>
  <el-table :data="tableData" v-loading="isloading" border max-height="300" class="tabledoud mb10 mt10">
    <el-table-column label="价格ID" prop="priceid" :width="80" />
    <el-table-column label="套餐标题" prop="name" />
    <el-table-column label="原价" :width="100">
      <template #default="{row}">
        {{row.oprice}} 元
      </template>
    </el-table-column>
    <el-table-column label="促销价" prop="pprice" :width="100">
      <template #default="{row}">
        <span style="color: #F56C6C">{{row.pprice}}</span> 元
      </template>
    </el-table-column>
    <el-table-column label="促销标签" :width="150">
      <template #default="{row}">
        <span v-for="(tag, index) in row.tags" :key="tag">
          {{tag}}
          <span v-if="index !== row.tags.length-1">、</span>
        </span>
      </template>
    </el-table-column>
    <el-table-column label="授权天数" :width="100">
      <template #default="{row}">
        {{row.days}} 天
      </template>
    </el-table-column>
    <el-table-column label="是否默认" :width="100">
      <template #default="{row}">
        {{ row.ifdefault == 1 ? '是' : '否' }}
      </template>
    </el-table-column>
    <el-table-column label="是否自动续费" :width="100">
      <template #default="{row}">
        <span v-if="row.ifcontinuous == 1">是</span>
        <span v-else>否</span>
      </template>
    </el-table-column>
    <el-table-column label="排序" prop="sequence" :width="60"/>
    <el-table-column label="操作" fixed="right" :width="180">
      <template #default="{row}">
        <span v-if="currentCorpid == dataInfo.corpid && isedit">
          <el-button type="text" size="mini" style="color: #F56C6C" v-if="row.ifdefault == 1" @click="handleCancelDefault(row)">取消默认</el-button>
          <el-button type="text" size="mini" v-else @click="handleSetDefault(row)">设为默认</el-button>
          <el-button type="text" size="mini" @click="handleEditPrice(row)">编辑</el-button>
          <el-button type="text" size="mini" style="color: #F56C6C" @click="handleDeletePrice(row)">删除</el-button>
        </span>
        <span v-else>
          <el-button type="text" size="mini" :disabled="true" v-if="row.ifdefault === 1">取消默认</el-button>
          <el-button type="text" size="mini" :disabled="true" v-else>设为默认</el-button>
          <el-button type="text" size="mini" :disabled="true">编辑</el-button>
          <el-button type="text" size="mini" :disabled="true">删除</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
  <add-paid-package
    ref="addPaidPackageRef"
    :dialog-form-data="dialogFormData"
    :dialog-status="dialogStatus"
    :dialog-visible="dialogVisible"
    @handleCloseDialog="handleCloseDialog"
    @handleReloadMediaPrice="getMediaPriceList"
  />
</template>

<script>
  import {ref, reactive, nextTick} from 'vue'
  import AddPaidPackage from "./AddPaidPackage";
  import {getMediaPrices, deleteMediaPrice} from "@/api/media/price";
  import {ElMessageBox, ElMessage} from 'element-plus'
  import { updateMediaPrice } from "@/api/media/price";

  export default {
    name: "PaidPackage",
    components: {AddPaidPackage},
    props: {
      dataInfo: {
        type: Object,
        required: true
      },
      isedit: {
        type: Boolean,
        default: false
      },
      currentCorpid: {
        type: Number,
        required: true
      }
    },
    setup(props) {
      const tableData = ref([])
      const isloading = ref(false)
      // 新建套餐相关参数
      const dialogVisible = ref(false)
      const dialogStatus = ref('create')
      const dialogFormData = reactive({
        priceid: undefined,
        mediaid: props.dataInfo.mediaid,
        name: '',
        oprice: 0.01,
        pprice: 0.01,
        tags: [],
        days: undefined,
        ifcontinuous: undefined,
        ifdefault: 0,
        intro: '',
        sequence: 1
      })
      const addPaidPackageRef = ref(null)

      // 获取媒资价格套餐列表
      const getMediaPriceList = () => {
        isloading.value = true
        getMediaPrices({mediaid: props.dataInfo.mediaid}).then(response => {
          isloading.value = false
          if (response.errcode == 0) {
            tableData.value = response.data.prices
          }
        })
      }
      const handleResetDialogFormData = () => {
        dialogFormData.priceid = undefined
        dialogFormData.name = undefined
        dialogFormData.oprice = 0.01
        dialogFormData.pprice = 0.01
        dialogFormData.tags = []
        dialogFormData.days = undefined
        dialogFormData.ifcontinuous = undefined
        dialogFormData.intro = ''
        dialogFormData.sequence = 1
        dialogFormData.ifdefault = 0
      }
      const handleCreatePaidPackage = () => {
        handleResetDialogFormData()
        dialogStatus.value = 'create'
        dialogVisible.value = true
        nextTick(() => {
          console.log(dialogFormData);
          addPaidPackageRef.value.dialogAddPaidPackageRef.clearValidate()
        })
      }
      const handleCloseDialog = () => {
        dialogVisible.value = false
      }
      // 编辑价格
      const handleEditPrice = (row) => {
        Object.assign(dialogFormData, row)
        dialogStatus.value = 'edit'
        dialogVisible.value = true
        nextTick(() => {
          addPaidPackageRef.value.dialogAddPaidPackageRef.clearValidate()
        })
      }
      // 删除价格
      const handleDeletePrice = (row) => {
        ElMessageBox.confirm('确定要删除价格套餐 ' + row.name + ' 吗？', '删除价格套餐', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMediaPrice({mediaid: props.dataInfo.mediaid, priceid: row.priceid}).then(response => {
            if (response.errcode === 0) {
              ElMessage({
                type: 'success',
                message: '删除成功',
                duration: 2000,
                onClose: () => {
                  getMediaPriceList()
                }
              })
            }
          })
        }).catch(() => {})
      }

      // 初始化
      const init = () => {
        getMediaPriceList()
      }

      const handleCancelDefault = (row) => {
        ElMessageBox.confirm('确定要取消收费套餐 ' + row.name + '的默认吗？', '取消默认套餐', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          row.ifdefault = 0
          row.mediaid = props.dataInfo.mediaid
          updateMediaPrice(row).then(response => {
            if (response.errcode === 0) {
              ElMessage({
                type: 'success',
                message: response.msg,
                duration: 2000,
                onClose: () => {
                  getMediaPriceList()
                }
              })
            }
          })
        }).catch(() => {})
      }
      const handleSetDefault = (row) => {
        ElMessageBox.confirm('确定要将收费套餐 ' + row.name + '设为默认吗？', '设置默认套餐', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          row.ifdefault = 1
          row.mediaid = props.dataInfo.mediaid
          updateMediaPrice(row).then(response => {
            if (response.errcode === 0) {
              ElMessage({
                type: 'success',
                message: response.msg,
                duration: 2000,
                onClose: () => {
                  getMediaPriceList()
                }
              })
            }
          })
        }).catch(() => {})
      }
      return {
        init,
        tableData,
        isloading,
        handleCreatePaidPackage,
        dialogStatus,
        dialogVisible,
        dialogFormData,
        handleCloseDialog,
        addPaidPackageRef,
        handleEditPrice,
        handleDeletePrice,
        getMediaPriceList,
        handleCancelDefault,
        handleSetDefault
      }
    }
  }
</script>

<style scoped>

</style>
